<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>Homepage</title>
	<style type="text/css">
		/* CSS Document */
		* {
			margin: 0;
			padding: 0;
		}

		a {
			text-decoration: none;
		}

		.clearfix:after {
			content: "";
			display: block;
			height: 0;
			visibility: hidden;
			clear: both;
		}

		.clearfix {
			*zoom: 1;
		}

		body {
			background: url(https://175.178.124.183:8888/down/zatltAyEYp1M.png) no-repeat;
			background-size: cover;
			background-attachment: fixed;
		}

		.content {
			width: 900px;
			height: 500px;
			margin: 200px auto 0 auto;
			border-radius: 10px;
			background-color: rgba(236, 236, 236, 0.59);
			transition: all 1.0s;
			/*box-shadow: 0px 0px 20px rgba(0,0,0,0.3);*/
		}

		.content img {
			float: left;
			width: 200px;
			height: 200px;
			margin: 50px 0 100px 80px;
			border-radius: 100px;

		}

		.content:hover {
			box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.52);
		}

		.content_r {
			float: right;
			width: 500px;
			margin: 80px 60px 0 0;
			/*	background-color: pink;*/
		}

		.content_l {
			float: left;
			width: 100%;
			text-align: center;
		}

		.content_l h5 {

			font-size: 17px;
		}

		.cc {
			margin-top: 10px;
			color: #1F2023;
			font-size: 18px;
		}

		.color_1 {
			color: #4855EC;
			font-size: 18px;
		}

		.deeppink {
			color: deeppink;
		}

		.link {
			margin-top: 30px;
		}

		.link a {
			display: block;
			float: left;
			width: 120px;
			height: 45px;
			margin: 5px 5px 0 0;
			/*	padding: 0 15px;*/
			color: #fff;
			line-height: 45px;
			transition: all 0.8s;
			/*	background-color: deeppink;*/

		}

		.link a:hover {
			background-color: rgba(0, 201, 243, 0.35);
		}

		.deeppink_1 {
			background-color: deeppink;
		}

		.dodgerblue {
			background-color: dodgerblue;
		}

		.magenta {
			background-color: magenta;
		}

		.orange {
			background-color: orange;
		}
	</style>
</head>

<body>
	<div class="content">
		<img src="https://175.178.124.183:8888/down/Wmg71WAnbKIu.png" alt="">  
		<div class="content_r clearfix">
			<div class="content_l clearfix">
				<h2>Hi~ 我是小健， Welcome here ！</h2>
				<p class="cc">茫茫人海中，有幸你我相遇，欢迎访问我的主页~</p>
				<p class="cc">有时感到迷茫，有时充满困惑，但依旧向前看!
					<br> 这就是我，偶尔走失，从未离开。
				</p>
				<br>
				<p class="color_1"></p>
				<p class="color_1">牢骚太盛防肠断，风物长宜放眼量</p>
				<br>
				<p class="deeppink"></p>
				<p class="deeppink">Since I chose a distant place,
					<br> I only care about the wind and rain</p>
				<div class="link">
					<a href="#" class="dodgerblue" target="_blank">Home</a>
					<a href="https://user.qzone.qq.com/3091212151/main" class="deeppink_1" target="_blank">QQ</a>
					<a href="https://v.qq.com/biu/u/history/" class="magenta" target="_blank">个人博客</a>
					<a href="https://zhuanlan.zhihu.com/p/600419705" class="orange" target="_blank">知乎</a>
				</div>
			</div>
		</div>
	</div>
</body>

</html>